/**
 * 菜单抽屉组件
 * 从顶部下滑显示的菜单弹窗
 */

'use client';

import React, { useState, useEffect } from 'react';
import { Plus, Grid3x3, Clock, Share2 } from 'lucide-react';
import { clsx } from 'clsx';
import localStorageKeys from '@/utils/localStorageKeys';

interface MenuDrawerProps {
  /** 是否打开弹窗 */
  open: boolean;
  /** 弹窗状态变化回调 */
  onOpenChange: (open: boolean) => void;
  /** 点击切换学校回调 */
  onSwitchSchool: () => void;
  /** 隐藏周末状态 */
  hideWeekend: boolean;
  /** 隐藏周末状态变化回调 */
  onHideWeekendChange: (hide: boolean) => void;
}

export const MenuDrawer: React.FC<MenuDrawerProps> = ({
  open,
  onOpenChange,
  onSwitchSchool,
  hideWeekend,
  onHideWeekendChange,
}) => {
  const handleClose = () => {
    onOpenChange(false);
  };

  const handleSwitchSchool = () => {
    handleClose();
    // 等待关闭动画完成后再打开学校选择器
    setTimeout(() => onSwitchSchool(), 300);
  };

  const handleComingSoon = (feature: string) => {
    alert(`${feature}功能正在开发中`);
  };

  const handleToggleWeekend = () => {
    const newValue = !hideWeekend;
    onHideWeekendChange(newValue);
    // 保存到 localStorage
    try {
      localStorage.setItem(localStorageKeys.hide_weekend, newValue ? 'true' : 'false');
    } catch (error) {
      console.error('Failed to save hide weekend setting:', error);
    }
  };

  if (!open) return null;

  return (
    <>
      {/* 背景遮罩 */}
      <div
        className="fixed inset-0 backdrop-blur-sm transition-opacity duration-300 z-40 animate-in fade-in duration-300"
        onClick={handleClose}
      />

      {/* 菜单内容 */}
      <div className="fixed left-0 right-0 top-0 bg-white shadow-2xl transition-transform duration-300 ease-out z-50 rounded-b-2xl animate-in slide-in-from-top duration-300"
      >
        <div className="container mx-auto px-4 py-6">
          {/* 功能按钮区域 */}
          <div className="grid grid-cols-4 gap-4 mb-6">
            {/* 切换学校按钮 */}
            <button
              onClick={handleSwitchSchool}
              className="flex flex-col items-center justify-center p-4 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-500 hover:from-emerald-500 hover:to-emerald-600 text-white transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg"
            >
              <div className="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mb-3">
                <Plus className="w-8 h-8" />
              </div>
              <span className="text-sm font-medium">切换学校</span>
            </button>

            {/* 课程管理按钮 */}
            <button
              onClick={() => handleComingSoon('课程管理')}
              className="flex flex-col items-center justify-center p-4 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-500 hover:from-emerald-500 hover:to-emerald-600 text-white transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg"
            >
              <div className="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mb-3">
                <Grid3x3 className="w-8 h-8" />
              </div>
              <span className="text-sm font-medium">课程管理</span>
            </button>

            {/* 查看时间按钮 */}
            <button
              onClick={() => handleComingSoon('查看时间')}
              className="flex flex-col items-center justify-center p-4 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-500 hover:from-emerald-500 hover:to-emerald-600 text-white transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg"
            >
              <div className="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mb-3">
                <Clock className="w-8 h-8" />
              </div>
              <span className="text-sm font-medium">查看时间</span>
            </button>

            {/* 分享课表按钮 */}
            <button
              onClick={() => handleComingSoon('分享课表')}
              className="flex flex-col items-center justify-center p-4 rounded-2xl bg-gradient-to-br from-emerald-400 to-emerald-500 hover:from-emerald-500 hover:to-emerald-600 text-white transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg"
            >
              <div className="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mb-3">
                <Share2 className="w-8 h-8" />
              </div>
              <span className="text-sm font-medium">分享课表</span>
            </button>
          </div>

          {/* 设置列表 */}
          <div className="space-y-2">
            {/* 隐藏周末课程开关 */}
            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors">
              <div className="flex-1">
                <h3 className="text-base font-medium text-gray-800">隐藏周末课程</h3>
                <p className="text-sm text-gray-500 mt-1">开启后将隐藏周六和周日的课程</p>
              </div>
              
              {/* 开关按钮 */}
              <button
                onClick={handleToggleWeekend}
                className={clsx(
                  'relative w-14 h-8 rounded-full transition-colors duration-300 flex items-center',
                  hideWeekend ? 'bg-emerald-500' : 'bg-gray-300'
                )}
              >
                <div
                  className={clsx(
                    'absolute w-6 h-6 bg-white rounded-full shadow-md transition-transform duration-300 flex items-center justify-center',
                    hideWeekend ? 'translate-x-7' : 'translate-x-1'
                  )}
                >
                  {hideWeekend && (
                    <svg
                      className="w-4 h-4 text-emerald-500"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={3}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  )}
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
